<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D Geometry Visualization</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/three@0.132.2/examples/js/utils/SceneUtils.js"></script>
    <script>
        // 初始化场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000); // 黑色背景
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 初始化控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(1, 1, 1);
        scene.add(directionalLight);

        // 创建更详细的坐标轴辅助
        function createAxisWithLabels() {
            const group = new THREE.Group();
            
            // X轴 (红色)
            const xAxis = new THREE.Line(
                new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(-10, 0, 0),
                    new THREE.Vector3(10, 0, 0)
                ]),
                new THREE.LineBasicMaterial({ color: 0xff0000 })
            );
            group.add(xAxis);
            
            // Y轴 (绿色)
            const yAxis = new THREE.Line(
                new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(0, -10, 0),
                    new THREE.Vector3(0, 10, 0)
                ]),
                new THREE.LineBasicMaterial({ color: 0x00ff00 })
            );
            group.add(yAxis);
            
            // Z轴 (蓝色)
            const zAxis = new THREE.Line(
                new THREE.BufferGeometry().setFromPoints([
                    new THREE.Vector3(0, 0, -10),
                    new THREE.Vector3(0, 0, 10)
                ]),
                new THREE.LineBasicMaterial({ color: 0x0000ff })
            );
            group.add(zAxis);
            
            // 添加坐标轴标签
            const loader = new THREE.FontLoader();
            loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
                // X轴标签
                for(let i = -10; i <= 10; i++) {
                    if(i !== 0) {
                        const xText = createText(font, i.toString(), 0.5, 0xffffff);
                        xText.position.set(i, -0.5, 0);
                        group.add(xText);
                    }
                }
                
                // Y轴标签
                for(let i = -10; i <= 10; i++) {
                    if(i !== 0) {
                        const yText = createText(font, i.toString(), 0.5, 0xffffff);
                        yText.position.set(-0.5, i, 0);
                        group.add(yText);
                    }
                }
                
                // Z轴标签
                for(let i = -10; i <= 10; i++) {
                    if(i !== 0) {
                        const zText = createText(font, i.toString(), 0.5, 0xffffff);
                        zText.position.set(0, -0.5, i);
                        group.add(zText);
                    }
                }
                
                // 添加坐标轴名称
                const xLabel = createText(font, 'X', 0.8, 0xff0000);
                xLabel.position.set(10.5, 0, 0);
                group.add(xLabel);
                
                const yLabel = createText(font, 'Y', 0.8, 0x00ff00);
                yLabel.position.set(0, 10.5, 0);
                group.add(yLabel);
                
                const zLabel = createText(font, 'Z', 0.8, 0x0000ff);
                zLabel.position.set(0, 0, 10.5);
                group.add(zLabel);
            });
            
            return group;
        }
        
        function createText(font, text, size, color) {
            const textGeo = new THREE.TextGeometry(text, {
                font: font,
                size: size,
                height: 0.1
            });
            const textMat = new THREE.MeshBasicMaterial({ color: color });
            return new THREE.Mesh(textGeo, textMat);
        }
        
        scene.add(createAxisWithLabels());

        // 定义关键点
        const points = {
            A: new THREE.Vector3(0, 0, 0),
            B: new THREE.Vector3(8, 0, 0),
            D: new THREE.Vector3(0, 5 * Math.sqrt(3), 0),
            C: new THREE.Vector3(3, 5 * Math.sqrt(3), 0),
        };

        // 计算E和F点
        points.E = new THREE.Vector3().copy(points.D).multiplyScalar(2/5);
        points.F = new THREE.Vector3().copy(points.B).multiplyScalar(0.5);

        // 创建原始三角形AEF
        const originalGeometry = new THREE.BufferGeometry().setFromPoints([points.A, points.E, points.F]);
        const originalMesh = new THREE.Mesh(
            originalGeometry,
            new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5, side: THREE.DoubleSide })
        );
        scene.add(originalMesh);

        // 创建折叠后的点P
        const P = new THREE.Vector3(2, 2, 4);
        points.P = P;

        // 创建折叠后的三角形PEF
        const foldedGeometry = new THREE.BufferGeometry().setFromPoints([P, points.E, points.F]);
        const foldedMesh = new THREE.Mesh(
            foldedGeometry,
            new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5, side: THREE.DoubleSide })
        );
        scene.add(foldedMesh);

        // 创建四边形边线
        const lineMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff });
        const abLine = new THREE.Line(new THREE.BufferGeometry().setFromPoints([points.A, points.B]), lineMaterial);
        const bcLine = new THREE.Line(new THREE.BufferGeometry().setFromPoints([points.B, points.C]), lineMaterial);
        const cdLine = new THREE.Line(new THREE.BufferGeometry().setFromPoints([points.C, points.D]), lineMaterial);
        const daLine = new THREE.Line(new THREE.BufferGeometry().setFromPoints([points.D, points.A]), lineMaterial);
        scene.add(abLine, bcLine, cdLine, daLine);

        // 创建EF线
        const efLine = new THREE.Line(
            new THREE.BufferGeometry().setFromPoints([points.E, points.F]),
            new THREE.LineBasicMaterial({ color: 0xff00ff })
        );
        scene.add(efLine);

        // 创建PD线
        const pdLine = new THREE.Line(
            new THREE.BufferGeometry().setFromPoints([P, points.D]),
            new THREE.LineBasicMaterial({ color: 0x00ffff })
        );
        scene.add(pdLine);

        // 创建PC线
        const pcLine = new THREE.Line(
            new THREE.BufferGeometry().setFromPoints([P, points.C]),
            new THREE.LineBasicMaterial({ color: 0xffff00 })
        );
        scene.add(pcLine);

        // 添加点标签
        function addPointLabel(point, name, color = 0xffffff) {
            const loader = new THREE.FontLoader();
            loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
                const textGeo = new THREE.TextGeometry(name, {
                    font: font,
                    size: 0.5,
                    height: 0.1
                });
                const textMat = new THREE.MeshBasicMaterial({ color: color });
                const textMesh = new THREE.Mesh(textGeo, textMat);
                
                // 调整标签位置，使其稍微偏移点位置
                textMesh.position.copy(point);
                textMesh.position.x += 0.3;
                textMesh.position.y += 0.3;
                textMesh.position.z += 0.3;
                
                scene.add(textMesh);
            });
        }
        
        // 为所有点添加标签
        addPointLabel(points.A, 'A', 0xffffff);
        addPointLabel(points.B, 'B', 0xffffff);
        addPointLabel(points.C, 'C', 0xffffff);
        addPointLabel(points.D, 'D', 0xffffff);
        addPointLabel(points.E, 'E', 0xffffff);
        addPointLabel(points.F, 'F', 0xffffff);
        addPointLabel(P, 'P', 0xffffff);

        // 设置相机位置
        camera.position.set(10, 10, 10);
        camera.lookAt(0, 0, 0);

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // 处理窗口大小变化
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>